import React, { Component } from 'react'
import "./index.css"

// 创建 Context 容器对象
const myContext = React.createContext()
// 从 myContext 身上解构出 Provider 组件，包裹住父组件，使用 value 属性将数据传递个子组件
const { Provider, Consumer } = myContext

export default class A extends Component {
    state = {
        name: "Tome",
        age: 10
    }
    render() {
        const { name, age } = this.state
        return (
            <div className='root'>
                <h2>我是A组件</h2>
                <div>我的名字是：{name}，我的年龄是：{age}</div>
                <Provider value={{ name, age }}>
                    <B />
                </Provider>
            </div>
        )
    }
}

class B extends Component {
    render() {
        return (
            <div className='child'>
                <h2>我是B组件</h2>
                <C />
            </div>
        )
    }
}

class C extends Component {
    // 在C组件中接收上面定义的myContext，必须定义为 static contextType = myContext
    static contextType = myContext
    render() {
        // 然后我们就可以使用 this.context 接收到根组件传递过来的值
        console.log(this.context); //=> {name: 'Tome', age: 10}
        const { name, age } = this.context
        return (
            <div className='grid'>
                <h2>我是C组件</h2>
                <div>我从A组件接收到的名字是：{name},年龄是：{age}</div>
                <D />
            </div>
        )
    }
}

function D() {
    return (
        <div className='grid2'>
            <h2>我是D组件</h2>
            <div>我从A组件接收到的名字是:
                {/* 在函数式组件中的使用方法 */}
                <Consumer>
                    {
                        context => {
                            const { name, age } = context
                            return `${name},年龄是：${age}`
                        }
                    }
                </Consumer>
            </div>
        </div>
    )
}
